<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <hr>

    <div @click="changeMsg1">message1回调改: {{ message1 }}</div>
    <div @click="changeMsg2">message2回调改: {{ message2 }}</div>
    <hr>

    <div @click="message1 += '王五'">message1行内改: {{ message1 }}</div>
    <!-- 这里修改的message2是setup中return对象的属性message2,里面存的是"高圆圆这个字符串",但是修改之后没有响应式 -->
    <div @click="message2 += '老六'">message2行内改: {{ message2 }}</div>
    <hr>
    <div @click="changeObj1">obj1.name 回调改: {{ obj1.name }}</div>
    <div>obj1.age: {{ obj1.age }}</div>
    <div @click="changeObj2">obj2.name 回调改: {{ obj2.name }}</div>
    <div>obj2.age: {{ obj2.age }}</div>

    <hr>
    <div @click="obj1.name = '刘英'">obj1.name 行内改: {{ obj1.name }}</div>
    <div @click="obj2.name = '赵玉田'">obj2.name 行内改: {{ obj2.name }}</div>

    
    
    


  </div>
</template>

<script>
import { reactive, ref } from 'vue'
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },

  setup() {

    //基本数据类型
    let text1 = ref('我爱你')
    let text2 = reactive('高圆圆')   //value不能被由reactive生成
    let changeMsg1 = () => {
      text1.value += '张三'
    }
    let changeMsg2 = () => {
      text2 += '李四'   // 这里改的是text2这个变量,和retuen对象里面的message2没关系
    }

    //引用数据类型
    let obj1 = ref({
      name: '宋小宝',
      age: 44
    })

    let obj2 = ref({
      name: '杨树林',
      age: 38
    })

    //ref对象修改
    let changeObj1 = () => {
      obj1 = {}  // 不能直接这么改,这么改的是obj1变量中存的内容,和return对象中的obj1没关系了

      console.log(obj1);
      console.log(obj1.value);// 读到的是一个reactive处理过后的proxy对象
      // obj1.value.name = '刘能' // 这个改的是reactive对象的属性

      obj1.value =reactive({
        name: '谢大脚',
        age: 36
      })
    }

    let changeObj2 = () => {
      console.log(obj2);
      obj2.name = '赵四'
      
    }


    return {
      message1: text1,  // 抛出的是一个ref对象
      message2: text2,  // 抛出的就是一个字符串 "高圆圆"
      changeMsg1: changeMsg1,
      changeMsg2: changeMsg2,
      obj1,
      obj2,
      changeObj1,
      changeObj2
      
    }
    }

   
    
  
}
</script>

<style scoped >

</style>